<template>
  <div class="page_container">
    <div class="left_box">
      <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu
          :index="item.id"
          v-for="(item, index) in menuList"
          :key="index"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            :index="childrenItem.id"
            v-for="childrenItem in item.children"
            :key="childrenItem.id"
            @click="checkMenu(childrenItem)"
          >
            <i class="el-icon-setting"></i>
            <span slot="title">{{ childrenItem.title }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right_box">
      <component
        v-if="currentMenu && currentMenu.component"
        :is="currentMenu.component"
      />
    </div>
  </div>
</template>

<script>
import { findDataByIdInTree } from "@/utils/index";
export default {
  name: "ItemMenu",
  props: {
    menuList: {
      type: Array,
      default: () => [
        {
          title: "导航一",
          id: "1",
          children: [
            { title: "选项1", id: "1-1", component: null },
            { title: "选项2", id: "1-2", component: null },
            { title: "选项3", id: "1-3", component: null },
          ],
        },
        {
          title: "导航二",
          id: "2",
          children: [
            { title: "选项1", id: "2-1", component: null },
            { title: "选项2", id: "2-2", component: null },
          ],
        },
        { title: "导航二", id: "3", component: null },
      ],
    },
    // 默认展开(id) 并选中
    defaultActive: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentMenu: null,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    checkMenu(childrenItem) {
      console.log("childrenItem", childrenItem);
      this.currentMenu = childrenItem;
    },
  },
  watch: {
    defaultActive: {
      immediate: true,
      handler(id) {
        if (id) {
          this.currentMenu = findDataByIdInTree(this.menuList, id);
          // console.log('findDataByIdInTree',this.currentMenu);
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
.page_container {
  display: flex;
  .left_box {
    height: 700px;
    width: 220px;
  }
  .right_box {
    width: 100%;
    height: 700px;
    border: 1px solid #000;
  }
}
</style>
